<template>
  <h2>商品列表</h2>
  <ul>
    <li v-for="item in productStore.all" :key="item.id">
      {{ item.title }}----{{ item.price }}----库存{{ item.inventory }}
      <br />
      <el-button type="primary" @click="add(item)" :disabled="!item.inventory"
        >添加到购物车</el-button
      >
    </li>
  </ul>
  <br />
  <hr />
</template>
<script lang="ts" setup>
import { useProductStore } from "@/store/product";
import { useCartStore } from "@/store/cart";
import { IProduct } from "@/api/shop";
const productStore = useProductStore();
const cratStore = useCartStore();

productStore.getDataAll();

const add = (item: IProduct) => {
  cratStore.addProductToCart(item);
};
</script>
<style lang="less" scoped>
ul {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  li {
    line-height: 30px;
    font-size: 18px;
  }
}
</style>
